<template>
  <div class="main">
    <div class="xuexishi_top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>认证</el-breadcrumb-item>
        <el-breadcrumb-item>机构认证</el-breadcrumb-item>
      </el-breadcrumb>
      <hr />
      <p style="font-size: 16px">第一步：请填写机构信息</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="机构类型" prop="region">
          <el-select
            style="width: 400px"
            v-model="ruleForm.region"
            placeholder="企业"
          >
            <el-option label="企业" value="qiye"></el-option>
            <el-option label="企业" value="qiye"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构名称" prop="name">
          <el-input
            style="width: 400px"
            v-model="ruleForm.name"
            placeholder="请填写营业执照上的名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="creditNum">
          <el-input
            style="width: 400px"
            v-model="ruleForm.creditNum"
            placeholder="请与营业执照保持一致"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在地" prop="Address">
          <el-select
            v-model="ruleForm.provinceAddress"
            aria-placeholder="请选择活动区域"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-select
            v-model="ruleForm.cityAddress"
            aria-placeholder="请选择活动区域"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicense">
          或提供组织机构代码
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="iconfont icon-B" style="font-size: 50px"></i>
            <div class="el-upload__text">请上传图片</div>
            <div class="el-upload__tip" slot="tip" style="margin: 0">
              请<a href="#">参考示意图拍</a
              ><em>只能上传jpg/png文件，且不超过500kb</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="机构账号开通授权书" prop="businessLicense">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="iconfont icon-B" style="font-size: 50px"></i>
            <div class="el-upload__text">请上传图片</div>
            <div class="el-upload__tip" slot="tip" style="margin: 0">
              运营者身份不是法人，需提供委托证明，点此<a href="#"
                >《机构账号开通授权书》</a
              >下载模块，完整加盖公章。请<a href="#">参考示意图拍</a
              >拍摄证件，照片必须清晰可见，大小不超过3M，仅支持jpg/png格式。
            </div>
          </el-upload>
        </el-form-item>
        <p>第二步：运营者信息</p>
        <el-form-item label="机构类型" prop="region">
          <el-select
            style="width: 400px"
            v-model="ruleForm.info"
            placeholder="二代身份证"
          >
            <el-option label="二代身份证" value="shenfenzheng"></el-option>
            <el-option label="护照" value="huzhao"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运行者姓名" prop="yunyingName">
          <el-input
            style="width: 400px"
            v-model="ruleForm.yunyingName"
            placeholder="请输入运营者姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件号码" prop="zhengjianNum">
          <el-input
            style="width: 400px"
            v-model="ruleForm.zhengjianNum"
            placeholder="请输入的证件号"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件照" prop="zhengjianzhao">
          <div class="shili">
            <div>示例<br /><img src="../assets/img/8.png" alt="" /></div>
            <div>
              请上传手持身份照片<br />
              <el-upload
               style="width:100px"
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="iconfont icon-B" style="font-size: 50px"></i>
                <div class="el-upload__text" style="width:100px">请上传图片</div>
              </el-upload>
            </div>
            <div>
              请上传手持身份照片<br /><img src="../assets/img/8.png" alt="" />
            </div>
          </div>
          <div class="shili">
            <div>示例<br /><img src="../assets/img/10.png" alt="" /></div>
            <div style="width:180px;">
              上传身份证正面<br />
              <el-upload
              
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="iconfont icon-B" style="font-size: 50px"></i>
                <div class="el-upload__text" style="width:100px">请上传图片</div>
              </el-upload>
            </div>
          </div>
          <div class="shili">
            <div>示例<br /><img src="../assets/img/9.png" alt="" /></div>
            <div style="width:180px;">
              上传身份证反面<br />
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="iconfont icon-B" style="font-size: 50px"></i>
                <div class="el-upload__text" style="width:100px">请上传图片</div>
              </el-upload>
            </div>
          </div>
          <p style="margin:0;color:gray;font-size:12px">请参考示意图拍摄证件，照片信息必须清晰可见，大小不超过3M，仅支持png,jpg格式</p>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 160px"
            disabled
            type="primary"
            @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      disabled: false,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      form: {
        num: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请选择机构类型",
            trigger: "blur",
          },
        ],
        region: [
          { required: true, message: "请选择机构类型", trigger: "change" },
        ],
        number: [
          {
            required: true,
            message: "请输入营业执照上的名称",
            trigger: "blur",
          },
        ],
        creditNum: [
          {
            required: true,
            message: "请与营业执照上保持一致",
            trigger: "blur",
          },
        ],
        Address: [
          {
            required: true,
            message: "请选择所在地",
            trigger: "blur",
          },
        ],
        businessLicense: [
          {
            required: true,
            message: "请上传营业执照",
            trigger: "blur",
          },
        ],
        zhengjianNum: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur",
          },
        ],
        yunyingName: [
          {
            required: true,
            message: "请输入运营者姓名",
            trigger: "blur",
          },
        ],
        zhengjianzhao: [
          {
            required: true,
            trigger: "blur",
          },
        ],
        provinceAddress: [],
      },
    };
  },
};
</script>

<style>
.shili{
  display: flex;
  font-size: 12px;
  color: gray;
}
.shili div {
  margin-right: 20px;
}
.imglist {
  display: flex;
}
.imglist img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

a {
  text-decoration: none;
  color: #1cdaa4;
}
.icon-B {
  line-height: 60px;
  color: #1cdaa4;
}
.el-upload-dragger {
  width: 100px;
  height: 100px;
}

.el-form-item:nth-child(3) input {
  margin-top: 20px;
}
.main {
  width: 100%;
  background-color: #fff;
}
.xuexishi_top {
  padding: 20px 20px;
}
@font-face {
  font-family: "iconfont"; /* Project id 2647831 */
  src: url("//at.alicdn.com/t/font_2647831_2knw9nhqoao.woff2?t=1625365001290")
      format("woff2"),
    url("//at.alicdn.com/t/font_2647831_2knw9nhqoao.woff?t=1625365001290")
      format("woff"),
    url("//at.alicdn.com/t/font_2647831_2knw9nhqoao.ttf?t=1625365001290")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-B:before {
  content: "\e705";
}

.icon-dianzan:before {
  content: "\e60c";
}

.icon-icon_comment:before {
  content: "\e602";
}

.icon-zhuanfa:before {
  content: "\e6cf";
}
</style>